<template>
    <div>
        <el-dropdown split-button type="primary" @command="handleCommand">添加查询参数
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="TEXT">文本</el-dropdown-item>
                <el-dropdown-item command="NUMBER">数字</el-dropdown-item>
                <el-dropdown-item command="SINGLE_SELECT">单选</el-dropdown-item>
                <el-dropdown-item command="MULTIPLE_SELECT">多选</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

        <el-table :data="params">
            <el-table-column label="参数名" width="120">
                <template slot-scope="pros">
                    <el-input v-model="pros.row.paramName"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="表单label" width="120">
                <template slot-scope="pros">
                    <el-input v-model="pros.row.paramLabel"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="参数类型" width="120">
                <template slot-scope="pros">
                    <span v-if="pros.row.paramDataType == 'TEXT'">文本</span>
                    <span v-if="pros.row.paramDataType == 'NUMBER'">数字</span>
                    <span v-if="pros.row.paramDataType == 'SINGLE_SELECT'">单选</span>
                    <span v-if="pros.row.paramDataType == 'MULTIPLE_SELECT'">多选</span>
                </template>

                <!-- TODO 添加更多查询组件支持 ，比如 时间，日期-->
            </el-table-column>

            <el-table-column label="参数数据源">
                <template slot-scope="pros">
                    <span v-if="pros.row.paramDataType == 'TEXT' ||pros.row.paramDataType == 'NUMBER'">无</span>

                    <div v-if="pros.row.paramDataType == 'SINGLE_SELECT' || pros.row.paramDataType == 'MULTIPLE_SELECT'">
                        <el-radio v-model="pros.row.paramDatasourceType" label="JSON">json</el-radio>

                        <el-radio v-model="pros.row.paramDatasourceType" label="SQL">sql</el-radio>

                        <el-input type="textarea" v-model="pros.row.paramDatasourceContent"></el-input>

                        <el-button type="primary" @click="validateQueryDataSource(pros.row)">测试数据源</el-button>

                        <el-button type="primary" @click="example(pros.row)">example</el-button>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="pros">
                    <el-button type="danger" icon="el-icon-delete" circle @click="remove(pros.$index)"></el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        props: ["datasourceId"],

        data() {
            return {
                params: []
            };
        },
        methods: {

            getParamsConfig() {

                return this.params;

            },
            setParamsConfig(params) {

                this.params = params;
            },

            remove(index) {
                this.params.splice(index, 1);
            },
            example(queryParam) {
                if (queryParam.paramDatasourceType == "JSON") {
                    queryParam.paramDatasourceContent = JSON.stringify([
                        {key: "key", value: "value"}
                    ]);
                } else {
                    queryParam.paramDatasourceContent =
                        "select 'key1' as `key`,'value1' as `value` from dual";
                }
            },

            validateJsonFormat(json) {
                if (Array.isArray(json)) {
                    this.$notify({
                        title: "成功",
                        message: "数据源格式正确",
                        type: "success"
                    });
                } else {
                    this.$notify.error({
                        title: "错误",
                        message: "数据源应该为JSON数组"
                    });
                }
            },

            validateQueryDataSource(queryParam) {
                if (queryParam.paramDatasourceType == "JSON") {
                    try {
                        let obj = JSON.parse(queryParam.paramDatasourceContent);

                        this.validateJsonFormat(obj);
                    } catch (e) {
                        // console.log(e);
                        this.$notify.error({
                            title: "错误",
                            message: "数据源应该为JSON数组"
                        });
                    }
                } else {
                    if (this.datasourceId != "") {
                        let params = new URLSearchParams();

                        params.append("datasourceId", this.datasourceId);
                        params.append("sql", queryParam.paramDatasourceContent);

                        this.$axios
                            .post("/query/testQueryDataSource", params)
                            .then(d => {
                                if (d.data.status) {
                                    //校验json格式

                                    this.validateJsonFormat(d.data.data);
                                } else {
                                    this.$notify.error({
                                        title: "错误",
                                        message: d.data.message
                                    });
                                }
                            })
                            .catch(e => {
                                this.$notify.error({
                                    title: "错误",
                                    message: e.message
                                });
                            });
                    } else {
                        this.$notify.error({
                            title: "错误",
                            message: "请选择一个数据源进行测试"
                        });
                    }

                    //根据当前数据源，执行sql，校验其返回结果。注意检查sql操作类型，只可以是select
                }
            },

            parseJsonArray(json) {
                try {
                    let obj = JSON.parse(json);

                    if (Array.isArray(obj)) {
                        console.log(obj);
                        return obj;
                    }

                    return [];
                } catch (e) {
                    console.log(e);
                    return [];
                }
            },

            handleCommand(command) {
                let newItem = {
                    paramLabel: '',
                    paramDataType: command,
                    paramName: "arg" + this.params.length,
                    value: "",
                    paramDatasourceType: "JSON",
                    paramDatasourceContent: "[]"
                };


                this.params.push(newItem);
            }
        }
    };
</script>

<style>
</style>
